<script setup lang="ts">
import { ref } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useVaStoreHook } from "@/store/modules/va";
// import AppList from "./appList.vue";

import HelpFilled from "@iconify-icons/ep/help-filled";
import CloseBold from "@iconify-icons/ep/close-bold";
import FolderOpened from "@iconify-icons/ep/folder-opened";
import WindowsLine from "@iconify-icons/ri/windows-line";
import AdvertisementLine from "@iconify-icons/ri/advertisement-line";
import LeafLine from "@iconify-icons/ri/leaf-line";
import FileCopy2Line from "@iconify-icons/ri/file-copy-2-line";
import keyboardLine from "@iconify-icons/ri/keyboard-line";
const toolbarB = ref(false);

const showMenu = ref(false);
const vaStore = useVaStoreHook();

const clickToolbar = () => {
  toolbarB.value = !toolbarB.value;
  showMenu.value = !showMenu.value;
};
const clickShowAppList = () => {
  vaStore.showUserDesktopAppList = true;
};
</script>

<template>
  <div class="toolbar-div">
    <div>
      <Transition>
        <div v-show="showMenu" class="toolbar-menu">
          <el-tooltip effect="dark" content="文件传输" placement="left-start">
            <el-button
              class="toolbar-btn"
              size="large"
              :icon="useRenderIcon(FolderOpened)"
              circle
            />
          </el-tooltip>
          <el-tooltip effect="dark" content="组合按键" placement="left-start">
            <el-button
              class="toolbar-btn"
              size="large"
              :icon="useRenderIcon(WindowsLine)"
              circle
            />
          </el-tooltip>
          <el-tooltip effect="dark" content="快捷指令" placement="left-start">
            <el-button
              class="toolbar-btn"
              size="large"
              :icon="useRenderIcon(AdvertisementLine)"
              circle
            />
          </el-tooltip>
          <el-tooltip effect="dark" content="应用列表" placement="left-start">
            <el-button
              @click="clickShowAppList"
              class="toolbar-btn"
              size="large"
              :icon="useRenderIcon(LeafLine)"
              circle
            />
          </el-tooltip>
          <el-tooltip effect="dark" content="剪切板" placement="left-start">
            <el-button
              class="toolbar-btn"
              size="large"
              :icon="useRenderIcon(FileCopy2Line)"
              circle
            />
          </el-tooltip>
          <el-tooltip effect="dark" content="屏幕键盘" placement="left-start">
            <el-button
              class="toolbar-btn"
              size="large"
              :icon="useRenderIcon(keyboardLine)"
              circle
            />
          </el-tooltip>
        </div>
      </Transition>

      <el-button
        @click="clickToolbar"
        class="toolbar-btn"
        type="primary"
        :icon="toolbarB ? useRenderIcon(CloseBold) : useRenderIcon(HelpFilled)"
        size="large"
        circle
      />
    </div>
    <!-- <AppList /> -->
  </div>
</template>

<style scoped>
.toolbar-div {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

.toolbar-menu {
  width: 40px;
}

.toolbar-btn {
  font-size: 24px;
  margin-left: 0px;
}
</style>
